<template>
	<el-container>
		<el-header v-if="this.isM==true">
			<div style="text-align: center;font-size: 18px;font-weight: 600;width: 100%">
					<span style="margin-left: 20px;" v-show="!isShowTitle">
						{{ bpmList.flowTitle }}
					</span>
				<div v-if="bpmStep.changeTitle=='1'" style="display: flex;">
					<el-input v-model="bpmList.flowTitle" style="width:300px" v-show="isShowTitle"></el-input>
					<el-icon @click="changeBpmTitle" style="margin-left: 10px;margin-top: 5px;cursor: pointer;">
						<el-icon-edit/>
					</el-icon>
				</div>
			</div>
		</el-header>
		<el-header v-if="this.isM==true">
			<div class="left-panel" style="font-size: 18px;font-weight: 600">
				<span v-show="opType=='start'" style="color: #67c23a">新建</span>
				<span v-show="opType!='start'">【{{ bpmList.id }}】</span>
			</div>
			<div class="right-panel">
				<el-checkbox v-show="bpmStep.follow=='1'" @change="changeBpmFollow" v-model="bpmList.followFlag" :checked="bpmList.followFlag">关注</el-checkbox>
				<el-icon>
					<el-icon-location/>
				</el-icon>
				{{bpmStep.stepName}}
				<el-radio-group v-model="bpmList.urgency">
					<el-radio-button label="0">一般</el-radio-button>
					<el-radio-button label="1">紧急</el-radio-button>
					<el-radio-button label="2">加急</el-radio-button>
				</el-radio-group>
			</div>
		</el-header>
		<el-header v-if="this.isM==false">
			<div class="left-panel" style="font-size: 18px;font-weight: 600">
				<span v-show="opType=='start'" style="color: #67c23a">新建</span>
				<span v-show="opType!='start'">NO:【{{ bpmList.id }}】</span>
				<span style="margin-left: 20px;" v-show="!isShowTitle">
						{{ bpmList.flowTitle }}
					</span>
				<div v-if="bpmStep.changeTitle=='1'" style="display: flex;">
					<el-input v-model="bpmList.flowTitle" style="width:300px" v-show="isShowTitle"></el-input>
					<el-icon @click="changeBpmTitle" style="margin-left: 10px;margin-top: 5px;cursor: pointer;">
						<el-icon-edit/>
					</el-icon>
				</div>
			</div>
			<div class="right-panel">
				<el-checkbox v-show="bpmStep.follow=='1'" @change="changeBpmFollow" v-model="bpmList.followFlag" :checked="bpmList.followFlag">关注</el-checkbox>
				<el-icon>
					<el-icon-location/>
				</el-icon>
				{{bpmStep.stepName}}
				<el-radio-group v-model="bpmList.urgency">
					<el-radio-button label="0">一般</el-radio-button>
					<el-radio-button label="1">紧急</el-radio-button>
					<el-radio-button label="2">加急</el-radio-button>
				</el-radio-group>
			</div>
		</el-header>
		<el-main class="nopadding" style="overflow: hidden;height: auto;padding-bottom: 50px;">
			<el-tabs v-model="activeName">
				<el-tab-pane label="办文单" name="first">
					<div style="overflow: auto;height: 100%;">
					<sc-water-mark ref="wm" :text="waterMarkContent" :subtext="waterMarkSubtext" :showWater="isM&&(bpmFlow.waterMark=='1')?true:(bpmFlow.waterMark=='1' && this.$TOOL.data.get('WATER_MARK')!='1')">
						<el-alert v-if="followUser!=''" type="warning" show-icon>
							<template #title>
								当前工作已被:<span style="color: #409eff;margin: 10px;">{{followUser}}</span>关注
							</template>
						</el-alert>
						<div style="margin: 10px;text-align: -webkit-center;">
							<VFormRender ref="preForm" :form-json="formJson" :form-data="formData" :preview-state="true"></VFormRender>
						</div>
						<el-card shadow="never" header="公文正文" v-if="(bpmStep.publicFileRole!='0' && bpmList.runAttach!='')||bpmStep.publicFileRole=='4'">
							<el-form-item label="正文">
								<sc-upload-file :apiObj="apiObj" v-model="runFileList" :data="{module:'doc'}" :showFileList="false" style="margin-bottom: 10px;"
												accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword,application/pdf,application/ofd,.ppt,.pptx"
												@success="addPublicFile" v-if="bpmStep.publicFileRole=='4'||bpmStep.publicFileRole=='5'">
									<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
								</sc-upload-file>
								<attach-menu v-model:attachIds="bpmList.runAttach" :roleFlag="bpmStep.publicFileRole" :preview="true" :stepRunId="bpmStepRun.stepRunId" :showVersion="true" @showVersion="this.showFileVersion"></attach-menu>
							</el-form-item>
						</el-card>
						<el-card shadow="never" header="会签意见">
							<idearecord :bpm-step-run-list="bpmStepRunList" v-if="bpmStep.approval=='1'" :hidden-opt="true"></idearecord>
							<div v-if="bpmStep.approvalFlag!='0'">
								<el-row :gutter="15" style="margin-top: 10px;">
									<el-col :span="12">
										<el-form-item label="观客意见">
											<el-radio-group v-model="bpmStepRun.passStatus">
												<el-radio-button label="1">同意</el-radio-button>
												<el-radio-button label="0">不同意</el-radio-button>
											</el-radio-group>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="快速会签">
											<el-select @change="changeCommIdea">
												<el-option v-for="item in commIdeaTextList" :key="item.value" :label="item.label" :value="item.label"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="15">
									<el-col :span="24">
										<el-form-item label="会签意见">
											<el-input type="textarea" rows="3" v-model="bpmStepRun.ideaText"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="15">
									<el-col :span="24">
										<el-form-item label="会签附件">
											<sc-upload-file :apiObj="apiObj" v-model="stepFileList" :data="{module:'doc'}" style="margin-bottom: 10px" :showFileList="false" @success="addStepFile"  v-if="bpmStep.publicFileRole=='4'">
												<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
											</sc-upload-file>
											<attach-menu v-model:attachIds="bpmStepRun.stepAttach" roleFlag="4" :preview="true"></attach-menu>
										</el-form-item>
									</el-col>
								</el-row>
							</div>
						</el-card>
						<el-card header="顺序流程人员选择" v-if="bpmFlow.flowType=='2' && bpmStepRun.opFlag!='1'">
							<sc-form-table v-model="orderUser" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
								<el-table-column prop="userName" label="主办人员" width="150">
									<template #default="scope">
										{{ scope.row.userName }}
										<el-button text type="primary" size="small" @click="setOrderBpmUser(scope.row, scope.$index)" style="float: right">选择</el-button>
									</template>
								</el-table-column>
								<el-table-column prop="sendToUser" label="抄送人员" width="200">
									<template #default="scope">
										{{ scope.row.sendToUserName }}
										<el-button text type="primary" size="small" @click="setSendToUser(scope.row, scope.$index)" style="float: right">选择</el-button>
									</template>
								</el-table-column>
								<el-table-column prop="remindNextUser" label="提醒审批人" width="250">
									<template #default="scope">
										<msg-box-check-box  v-model:msgType="scope.row.remindNextUser" code="bpm-approved" label=""></msg-box-check-box>
									</template>
								</el-table-column>
								<el-table-column prop="remindNextUser" label="提醒创建人" width="250">
									<template #default="scope">
										<msg-box-check-box v-model:msgType="scope.row.remindCreateUser" code="bpm-create" label=""></msg-box-check-box>
									</template>
								</el-table-column>
								<el-table-column prop="remindNextUser" label="提醒参与人" width="250">
									<template #default="scope">
										<msg-box-check-box v-model:msgType="scope.row.remindParticipant" code="bpm-join" label=""></msg-box-check-box>
									</template>
								</el-table-column>
								<el-table-column prop="msgContent" label="提醒内容" width="300">
									<template #default="scope">
										<el-input v-model="scope.row.msgContent" placeholder="请输入提醒内容" maxlength="380" type="textarea" :show-word-limit="true"></el-input>
									</template>
								</el-table-column>
							</sc-form-table>
							<el-card header="消息提醒" v-if="bpmStep.remindNextUser!='0'">
								<msg-box-check-box v-if="bpmStep.remindNextUser!='0'" v-model:msgType="form.remindNextUser" code="bpm-approved" label="提醒审批人"></msg-box-check-box>
								<el-form-item label="消息内容" v-if="form.remindNextUser!=''">
									<el-input v-model="form.msgContent" placeholder="消息内容为空时,系统自动生成消息" type="textarea" maxlength="380"  rows="3" clearable></el-input>
								</el-form-item>
							</el-card>
							<el-card header="流程抄送" v-if="bpmStep.autoSendType=='2'">
								<el-form-item label="人员选择">
									<select-user-dialog v-model:accountId="form.autoSendUser" :mode="true"/>
								</el-form-item>
							</el-card>
						</el-card>
					</sc-water-mark>
					</div>
				</el-tab-pane>
				<el-tab-pane label="正文" name="second">
					<docFilePreview :attach-ids="this.bpmList.runAttach" :publicFileRole="bpmStep.publicFileRole"></docFilePreview>
				</el-tab-pane>
				<el-tab-pane label="关联" name="third">
					<div v-if="bpmStep.bpmLinkFlag!=undefined&&bpmStep.bpmLinkFlag!=''&&bpmStep.bpmLinkFlag!='0' && isShowBpmLink">
						<el-card shadow="never" header="关联流程">
							<bpmlink ref="bpmLink" :bpm-link-flag="bpmStep.bpmLinkFlag" :runId="bpmList.runId" @success="setBpmLinkShow"></bpmlink>
						</el-card>
					</div>
					<div v-else>
						<el-empty title="暂无数据"></el-empty>
					</div>
				</el-tab-pane>
			</el-tabs>
		</el-main>
		<el-footer>
			<div style="display: inline-block;">
				<el-dropdown>
					<el-button type="primary">
						更多...<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item v-if="bpmStep.addStep=='1'||bpmStep.addStep=='3'" @click="addBpmStepRun('before')">前加签</el-dropdown-item>
							<el-dropdown-item v-if="bpmStep.addStep=='2'||bpmStep.addStep=='3'" @click="addBpmStepRun('after')">后加签</el-dropdown-item>
							<el-dropdown-item @click="flowChartPreview" v-if="!isM">公文设计图</el-dropdown-item>
							<el-dropdown-item @click="flowChartRun" v-if="!isM">公文走向图</el-dropdown-item>
							<el-dropdown-item @click="setCommIdea">会签意见设置</el-dropdown-item>
							<el-dropdown-item @click="importBpmData">流程导入</el-dropdown-item>
							<el-dropdown-item @click="deleteBpmList" v-if="bpmFlow.isRevoke=='1'">撤销公文</el-dropdown-item>
							<el-dropdown-item @click="printBpm" v-if="bpmFlow.printFlag=='1'">流程打印</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
				<el-button type="danger" style="margin-left: 10px" v-if="bpmStep.goBack!='0'" @click="setGoBackOpt">回退</el-button>
			</div>
			<div style="display: inline-block;float: right">
				<el-button type="primary" v-show="bpmStepRun.opFlag=='0'" @click="sendBpmToNext">提交</el-button>
				<el-button type="success" v-show="bpmStepRun.opFlag!='0'" @click="setIdeaText">审阅</el-button>
				<el-button type="danger" @click="saveFormData">保存</el-button>
			</div>
		</el-footer>
	</el-container>
	<select-user-for-bpm v-model:accountId="tempOrderUser" ref="selectBpmUserDialog" :stepId="bpmStep.stepId" :tempOrgId="bpmFlow.tempOrgId" :mode="false" :isNotShowBtn="true" change-user="1" resType="1" @success="setOrderUser"/>
	<sendbpmtonext v-if="sendDialog.save" ref="sendSaveDialog"
				   @closed="sendDialog.save=false"
				   :run-id="bpmList.runId"
				   :bpm-step="bpmStep"
				   :temp-org-id="bpmFlow.tempOrgId"
				   :flow-id="bpmList.flowId" :step-run-id="bpmStepRun.stepRunId"></sendbpmtonext>
	<commideadialog v-if="commIdeaDialog.save" ref="commIdeaDialog" @close="commIdeaDialog.save=false"></commideadialog>
	<preset-dialog v-if="dialog.presetSave" ref="presetDialog" @close="dialog.presetSave=false"
				   @closed="sendDialog.save=false"
				   :run-id="bpmList.runId"
				   :bpm-step="bpmStep"
				   :temp-org-id="bpmFlow.tempOrgId"
				   :flow-id="bpmList.flowId" :step-run-id="bpmStepRun.stepRunId"></preset-dialog>
	<go-back-step-list v-if="dialog.goBackSave" ref="saveGoBackDialog" @success="handleGoBackSaveSuccess" @closed="dialog.goBackSave=false"></go-back-step-list>
	<addbpmstep v-if="dialog.addStepSave" ref="addStepDialog"
				:step-run-id="bpmStepRun.stepRunId"
				:temp-org-id="bpmFlow.tempOrgId"
				:step-id="bpmStep.stepId" @closed="dialog.addStepSave=false"></addbpmstep>
	<attach-version v-if="dialog.versionSave" ref="fileVersionDialog" @closed="dialog.versionSave=false"></attach-version>
	<select-user-dialog v-model:accountId="tempSendToUser" ref="selectUserDialog" :is-not-show-btn="true" :mode="true" @success="setSendToUserRes"/>
	<bpmdataimport v-if="dialog.importSave" ref="bpmImportDialog" :flow-id="bpmList.flowId" @closed="dialog.importSave=false" @success="setBpmData"></bpmdataimport>
</template>
<script>
import useTabs from '@/utils/useTabs'
import VFormRender from '@/components/designer/form-render/index'
import Sendbpmtonext from "@/views/doc/handle/sendbpmtonext";
import commideadialog from "@/views/doc/handle/commideadialog";
import Changeuserdialog from "./changeuserdialog";
import AttachMenu from '@/views/module/attachMenu'
import idearecord from './idearecord'
import bpmsys from './bpmsys'
import addbpmstep from "./addbpmstep";
import goBackStepList from "./goBackStepList";
import Addbpmstep from "@/views/doc/handle/addbpmstep";
import {isMobile} from "@/utils/util"
import selectUserForBpm from "@/views/module/selectUserForBpm";
import AttachVersion from "@/views/module/attachVersion";
import presetDialog from './persetdialog'
import msgBoxCheckBox from "@/views/module/msgBoxCheckBox";
import selectUserDialog from "@/views/module/selectUserDialog";
import bpmlink from "./bpmlink";
import bpmdataimport from "@/views/doc/handle/bpmdataimport";
import docFilePreview from "./docFilePreview";
export default {
	name: 'Handle Document',
	mixins: [bpmsys],
	components: {
		docFilePreview,
		bpmdataimport,
		bpmlink,
		selectUserDialog,
		msgBoxCheckBox,
		Addbpmstep,
		AttachMenu,
		Changeuserdialog,
		Sendbpmtonext,
		commideadialog,
		idearecord,
		goBackStepList,
		addbpmstep,
		VFormRender,
		selectUserForBpm,
		AttachVersion,
		presetDialog
	},
	data() {
		return {
			isM:false,
			sendDialog: {
				save: false,
				addStepSave:false,
			},
			docx:'',
			dialog: {
				presetSave:false,
				goBackSave:false,
				importSave:false
			},
			activeName:'first',
			commIdeaDialog: {
				save: false
			},
			isShowBpmLink:true,
			isShowTitle: false,
			opType: this.$route.query.opType,
			commIdeaTextList: [],
			apiObj: this.$API.file.attach.uploadFile,
			bpmRunNo: 0,
			bpmFlow: {},
			formJson: {},
			formData: {},
			runFileList: [],
			stepFileList: [],
			bpmStepRunList:[],
			childrenTable:[],
			waterMarkContent:'',
			waterMarkSubtext:'',
			followUser:'',
			bpmStep: {
				goBack:'0',
			},
			form:{
				remindNextUser:'',
				msgContent:'',
				autoSendUser:''
			},
			tempOrderUser:'',
			tempSendToUser:'',
			tempRow:null,
			orderUser:[],
			addTemplate: {
				userAccountId: '',
				userName:'',
				remindNextUser:'',
				remindCreateUser:'',
				remindParticipant:'',
				msgContent:'',
				sendToUser:'',
				sendToUserName:''
			},
			bpmList: {
				runId: this.$route.query.runId,
				flowId: this.$route.query.flowId,
				isDoc:this.$route.query.isDoc,
				flowTitle: this.$route.query.flowTitle,
				classifiedLevel: this.$route.query.classifiedLevel,
				fromOrg: this.$route.query.fromOrg,
				urgency: this.$route.query.urgency,
				followFlag:this.$route.query.follow,
				runAttach: ''
			},
			bpmStepRun: {
				opFlag: '0',
				stepRunId: this.$route.query.stepRunId,
				ideaText: '',
				passStatus: '1',
				stepAttach: '',
			},
		}
	},
	mounted() {
		this.isM = isMobile();
		this.getBpmCommIdeaList();
		if (this.opType == "start") {
			useTabs.setTitle(this.bpmList.flowTitle)
			this.getCreateBpmFormDataBean();
		} else {
			this.getHandleBpmFormDataBean();
		}
	},
	methods: {
		setBpmLinkShow(flag)
		{
			this.isShowBpmLink = flag
		},
		rendered(){
			console.log("渲染完成")
		}
	}
}
</script>
<style lang="scss" scoped>
:deep(.el-card__header){
	background: aliceblue;
	line-height: 39px;
	padding-top: 0;
}
:deep(.el-tabs__header){
	margin: 0;
}
:deep(.el-tabs__nav-scroll){
	padding-left: 10px;
}
:deep(.el-tabs--top){
	height: 100%;
}
:deep(.el-tab-pane){
	height: 100%;
}
:deep(.el-tabs__content)
{
	height: 100%;
}
</style>
